<template >
   <div style="background-color: #f0f4fd">
<!--  顶部导航栏   -->
     <div style="position: relative; overflow: hidden; height: 700px">

       <div style="position: absolute" class="bg-img">

         <transition name="trans">
           <img class="banner-img" :src="picSrcs[currentPicIndex]" alt="Tencent Perspectives">
         </transition>

       </div>
       <div  class="banner-shadow">
         <div class="shadow-info">
           <h2>精品展 #成才在腾讯                  </h2>
           <h5>在腾讯视角新的系列文章里，一起遇见不断推动创新，身体力行“用户为本，科技向善”的杰出腾讯团队成员。                  </h5>
         </div>
         <div class="banner_arr">
           <span @click="changePicPre"  class="banner_arr_l" ></span>
           <span @click="changePicNext" class="banner_arr_r" ></span>
         </div>
       </div>
       <el-collapse-transition>
         <div style="position: absolute" v-show="!isHide" class="bg-white">
         </div>
       </el-collapse-transition>
<!--position： absolute代码靠下的在上层显示-->
       <div  @mouseover="hoverNav" @mouseleave="leaveNav" style=" position: absolute;  width: 100%" >
         <div id="nav">
           <el-row >
             <el-col :span="12">
               <div>
                 <a class="logo" href="#">
                   <span>Tencent腾讯</span>
                 </a>
               </div>
             </el-col>
             <el-col  :span="12">
               <el-menu style="color: #FFF;" :default-active="activeIndex" background-color="transparent"  class="el-menu-demo" mode="horizontal" @select="handleSelect" >
                 <el-submenu   index="1">
                   <template  slot="title">简介</template>
                   <el-menu-item @mouseover="isHide=false" @mouseleave="isHide=true" index="2-1">公司简介</el-menu-item>
                   <el-menu-item index="2-2">愿景与使命</el-menu-item>
                   <el-menu-item index="2-3">发展历程</el-menu-item>
                 </el-submenu>
                 <el-submenu index="2">
                   <template slot="title">业务</template>
                   <el-menu-item index="2-1">面向用户</el-menu-item>
                   <el-menu-item index="2-2">面向企业</el-menu-item>
                   <el-menu-item index="2-3">创新科技</el-menu-item>
                 </el-submenu>
                 <el-submenu index="3">
                   <template slot="title">员工</template>
                   <el-menu-item index="3-1">人才发展</el-menu-item>
                   <el-menu-item index="3-2">腾讯学院</el-menu-item>
                   <el-menu-item index="3-3">选项3</el-menu-item>
                 </el-submenu>
                 <el-submenu index="4">
                   <template slot="title">企业责任</template>
                   <el-menu-item index="4-1">全球战疫</el-menu-item>
                   <el-menu-item index="4-2">践行承诺</el-menu-item>
                   <el-menu-item index="4-3">支持善举</el-menu-item>
                   <el-menu-item index="4-4">鼓励创新</el-menu-item>
                 </el-submenu>
                 <el-submenu index="5">
                   <template slot="title">投资者</template>
                   <el-menu-item index="5-1">财务报告</el-menu-item>
                   <el-menu-item index="5-2">投资者工具包</el-menu-item>
                 </el-submenu>
                 <el-submenu index="6">
                   <template slot="title">媒体</template>
                   <el-menu-item index="6-1">企业动态</el-menu-item>
                   <el-menu-item index="6-2">财务新闻</el-menu-item>
                 </el-submenu>
               </el-menu>
             </el-col>
           </el-row>
         </div>
       </div>

     </div>
     <div class="main" style="position: relative;top: -100px">
       <el-row>
         <el-col :span="3" :offset=2>
           <h4 class="header">最新动态</h4>
         </el-col>
       </el-row>

<!--   新闻卡片    -->
       <div class="line1">
         <el-row :gutter=20>
           <el-col :span="13" :offset=2>
             <el-card :body-style="{ padding: '0px' }">
               <img class="img-one"  :src="mainSrcs[0]"  alt="1" >
               <div>
                 <span class="tagline">2021.07.20</span>
               </div>
               <div style="padding: 0 20px 40px 20px">
                 <h3 class="card-title">碳中和之路：赫尔辛基经验谈</h3>
                 <div class="card-info" >在腾讯研究院“腾讯对话·Tencent Dialogue”科技世界观系列的最新一期，瓦帕沃里市长便应邀与腾讯首席探索官网大为（David Wallerstein）就可持续发展、能源效率和碳中和之路等议题展开交流和讨论。</div>
               </div>
             </el-card>
           </el-col>
           <el-col :span="6" :offset=1>
             <el-card :body-style="{ padding: '0px'}" shadow="always">
               <img class="img-one"  :src="mainSrcs[1]">
               <div style="background-color: rgba(25, 74, 195,1)">
                 <div style="padding-top:70px">
                   <span class="tagline-2">2020.06.21</span>
                 </div>
                 <div style="padding: 0 20px 40px 20px">
                   <h3 class="card-title-2">WeChat Pay HK与腾讯公益发起“日行一膳”慈善活动 响应香港消费券计划</h3>
                   <div class="card-info-2" >鼓励香港市民消费并捐赠公益印花  支持惜食堂送爱心餐食</div>
                 </div>
               </div>
             </el-card>
           </el-col>
         </el-row >

         <el-row :gutter=20 style="margin-top: 30px">
           <el-col :span="6" :offset=2>
             <el-card :body-style="{ padding: '0px'}">
               <img class="img-one"  :src="mainSrcs[1]">
               <div style="background-color: rgba(25, 74, 195,1)">
                 <div style="padding-top:70px">
                   <span class="tagline-2">2020.06.21</span>
                 </div>
                 <div style="padding: 0 20px 40px 20px">
                   <h3 class="card-title-2">WeChat Pay HK与腾讯公益发起“日行一膳”慈善活动 响应香港消费券计划</h3>
                   <div class="card-info-2" >鼓励香港市民消费并捐赠公益印花  支持惜食堂送爱心餐食</div>
                 </div>
               </div>
             </el-card>
           </el-col>

           <el-col :span="6" :offset=1>
             <el-card :body-style="{ padding: '0px'}">
               <img class="img-one"  :src="mainSrcs[1]">
               <div style="background-color: rgba(25, 74, 195,1)">
                 <div style="padding-top:70px">
                   <span class="tagline-2">2020.06.21</span>
                 </div>
                 <div style="padding: 0 20px 40px 20px">
                   <h3 class="card-title-2">WeChat Pay HK与腾讯公益发起“日行一膳”慈善活动 响应香港消费券计划</h3>
                   <div class="card-info-2" >鼓励香港市民消费并捐赠公益印花  支持惜食堂送爱心餐食</div>
                 </div>
               </div>
             </el-card>
           </el-col>

           <el-col :span="6" :offset=1>
             <el-card :body-style="{ padding: '0px'}">
               <img class="img-one"  :src="mainSrcs[1]">
               <div style="background-color: rgba(25, 74, 195,1)">
                 <div style="padding-top:70px">
                   <span class="tagline-2">2020.06.21</span>
                 </div>
                 <div style="padding: 0 20px 40px 20px">
                   <h3 class="card-title-2">WeChat Pay HK与腾讯公益发起“日行一膳”慈善活动 响应香港消费券计划</h3>
                   <div class="card-info-2" >鼓励香港市民消费并捐赠公益印花  支持惜食堂送爱心餐食</div>
                 </div>
               </div>
             </el-card>
           </el-col>
         </el-row>
<!--中部导航栏-->
         <div style="background-color: #FFFFFF; height: 50px; margin-top: 60px"></div>
         <el-row :gutter=20 style="background-color: #FFFFFF; ">
           <el-col :span="6" :offset=2>
             <el-card :body-style="{ padding: '0px'}">
               <div style="position: relative; height: 200px">
                 <div style="position: absolute">
                   <img class="img-one" :src="centerNavSrcs[0]">
                 </div>
                 <div class="center-shadow" >
                   <div class="shadow-info" style="font-size: 30px">公司简介</div>
                 </div>
               </div>
             </el-card>
           </el-col>
           <el-col :span="6" :offset=1>
             <el-card :body-style="{ padding: '0px'}">
               <div style="position: relative; height: 200px">
                 <div style="position: absolute">
                   <img class="img-one" :src="centerNavSrcs[1]">
                 </div>
                 <div class="center-shadow" >
                   <div class="shadow-info" style="font-size: 30px">企业文化</div>
                 </div>
               </div>
             </el-card>
           </el-col>
           <el-col :span="6" :offset=1>
             <el-card :body-style="{ padding: '0px'}">
               <div style="position: relative; height: 200px">
                 <div style="position: absolute">
                   <img class="img-one" :src="centerNavSrcs[2]">
                 </div>
                 <div class="center-shadow" >
                   <div class="shadow-info" style="font-size: 30px">办公地点</div>
                 </div>
               </div>
             </el-card>
           </el-col>
         </el-row>
         <div style="background-color: #FFFFFF; height: 50px;"></div>
       </div>
     </div>
<!--  中部链接导航栏   -->
     <div style="background-color: #1b1f25; height: 510px;">
<!--   左侧导航    -->
       <div style="width: 500px; height: 510px;  float: left">
         <div class="left-show" @mouseover="leftShowHover(0)">
           <div class="left-show-title">连接用户与生活</div>
           <div>让生活更便捷更多彩</div>
         </div>
         <div class="left-show" @mouseover="leftShowHover(1)">
           <div class="left-show-title">连接企业与科技</div>
           <div>数字化助手，助力产业升级</div>
         </div>
         <div class="left-show" @mouseover="leftShowHover(2)">
           <div class="left-show-title">连接现在与未来</div>
           <div>探索面向未来的创新科技</div>
         </div>
       </div>
<!--   右侧链接    -->
       <div style="width: 750px;height: 510px; float: left; margin-left: 50px">
<!--    块1     -->
         <div class="block1" v-show="leftNavIndex===0">
           <div class="right-show-line1" style="height: 255px;width: 750px">
             <div  style="position: relative">
               <div style="width: 375px; float: left; position: absolute">
                 <img width="375px" height="255px" src="https://www.tencent.com/data/index/index_link_1_1.jpg" alt="">
               </div>
               <div  class="shadow-info right-shadow" @mouseover="rightInfoHide=0" @mouseleave="rightInfoHide=-1">
                 <div>通信与社交</div>
                 <div v-show="rightInfoHide===0"
                      style="font-size: 10px;font-weight: normal;line-height: 1.5em"
                 >
                   连接人与人，提供功能丰富的即时通信和社交平台，让沟通更便捷。
                 </div>
               </div>
             </div>
             <div style="position: relative; margin-left: 375px">
               <div style="width: 375px; float: left; position: absolute">
                 <img width="375px" height="255px" src="https://www.tencent.com/data/index/index_link_1_2.jpg" alt="">
               </div>
               <div  class="shadow-info right-shadow" @mouseover="rightInfoHide=1" @mouseleave="rightInfoHide=-1">
                 <div>数字内容</div>
                 <div v-show="rightInfoHide===1"
                      style="font-size: 10px;font-weight: normal;line-height: 1.5em"
                 >
                   通过腾讯云物联网，致力提供IoT全栈产品和解决方案。
                 </div>
               </div>
             </div>
           </div>

           <div class="right-show-line2" style="height: 255px;width: 750px">
             <div  style="position: relative">
               <div style="width: 375px; float: left; position: absolute">
                 <img width="375px" height="255px" src="https://www.tencent.com/data/index/index_link_1_3.jpg" alt="">
               </div>
               <div  class="shadow-info right-shadow" @mouseover="rightInfoHide=2" @mouseleave="rightInfoHide=-1">
                 <div>金融科技服务</div>
                 <div v-show="rightInfoHide===2"
                      style="font-size: 10px;font-weight: normal;line-height: 1.5em"
                 >
                   连接人与人，提供功能丰富的即时通信和社交平台，让沟通更便捷。
                 </div>
               </div>
             </div>
             <div style="position: relative; margin-left: 375px">
               <div style="width: 375px; float: left; position: absolute">
                 <img width="375px" height="255px" src="https://www.tencent.com/data/index/index_link_3_4.jpg" alt="">
               </div>
               <div  class="shadow-info right-shadow" @mouseover="rightInfoHide=3" @mouseleave="rightInfoHide=-1">
                 <div>工具</div>
                 <div v-show="rightInfoHide===3"
                      style="font-size: 10px;font-weight: normal;line-height: 1.5em"
                 >
                   通过腾讯云物联网，致力提供IoT全栈产品和解决方案。
                 </div>
               </div>
             </div>
           </div>


         </div>
<!--    块2     -->
         <div class="block2" v-show="leftNavIndex===1">
           <div class="right-show-line1" style="height: 255px;width: 750px">
             <div  style="position: relative">
               <div style="width: 375px; float: left; position: absolute">
                 <img width="375px" height="255px" src="https://www.tencent.com/data/index/index_link_2_1.jpg" alt="">
               </div>
               <div  class="shadow-info right-shadow" @mouseover="rightInfoHide=4" @mouseleave="rightInfoHide=-1">
                 <div>腾讯广告营销</div>
                 <div v-show="rightInfoHide===4"
                      style="font-size: 10px;font-weight: normal;line-height: 1.5em"
                 >
                   连接人与人，提供功能丰富的即时通信和社交平台，让沟通更便捷。
                 </div>
               </div>
             </div>
             <div style="position: relative; margin-left: 375px">
               <div style="width: 375px; float: left; position: absolute">
                 <img width="375px" height="255px" src="https://www.tencent.com/data/index/index_link_2_2.jpg" alt="">
               </div>
               <div  class="shadow-info right-shadow" @mouseover="rightInfoHide=5" @mouseleave="rightInfoHide=-1">
                 <div>腾讯云</div>
                 <div v-show="rightInfoHide===5"
                      style="font-size: 10px;font-weight: normal;line-height: 1.5em"
                 >
                   通过腾讯云物联网，致力提供IoT全栈产品和解决方案。
                 </div>
               </div>
             </div>
           </div>

           <div class="right-show-line2" style="height: 255px;width: 750px">
             <div  style="position: relative">
               <div style="width: 375px; float: left; position: absolute">
                 <img width="710px" height="255px" src="https://www.tencent.com/data/index/index_link_2_3.jpg" alt="">
               </div>
               <div  class="shadow-info right-shadow" @mouseover="rightInfoHide=6" @mouseleave="rightInfoHide=-1">
                 <div>智慧产业</div>
                 <div v-show="rightInfoHide===6"
                      style="font-size: 10px;font-weight: normal;line-height: 1.5em"
                 >
                   连接人与人，提供功能丰富的即时通信和社交平台，让沟通更便捷。
                 </div>
               </div>
             </div>
<!--             <div style="position: relative; margin-left: 375px">-->
<!--               <div style="width: 375px; float: left; position: absolute">-->
<!--                 <img width="375px" height="255px" src="https://www.tencent.com/data/index/index_link_3_4.jpg" alt="">-->
<!--               </div>-->
<!--               <div  class="shadow-info right-shadow" @mouseover="rightInfoHide=7" @mouseleave="rightInfoHide=-1">-->
<!--                 <div>腾讯探索</div>-->
<!--                 <div v-show="rightInfoHide===7"-->
<!--                      style="font-size: 10px;font-weight: normal;line-height: 1.5em"-->
<!--                 >-->
<!--                   通过腾讯云物联网，致力提供IoT全栈产品和解决方案。-->
<!--                 </div>-->
<!--               </div>-->
<!--             </div>-->
           </div>


         </div>
<!--    块3    -->
         <div class="block3" v-show="leftNavIndex===2">
           <div class="right-show-line1" style="height: 255px;width: 750px">
             <div  style="position: relative">
               <div style="width: 375px; float: left; position: absolute">
                 <img width="375px" height="255px" src="https://www.tencent.com/data/index/index_link_3_1.jpg" alt="">
               </div>
               <div  class="shadow-info right-shadow" @mouseover="rightInfoHide=8" @mouseleave="rightInfoHide=-1">
                 <div>人工智能</div>
                 <div v-show="rightInfoHide===8"
                      style="font-size: 10px;font-weight: normal;line-height: 1.5em"
                 >
                   连接人与人，提供功能丰富的即时通信和社交平台，让沟通更便捷。
                 </div>
               </div>
             </div>
             <div style="position: relative; margin-left: 375px">
               <div style="width: 375px; float: left; position: absolute">
                 <img width="375px" height="255px" src="https://www.tencent.com/data/index/index_link_3_2.jpg" alt="">
               </div>
               <div  class="shadow-info right-shadow" @mouseover="rightInfoHide=9" @mouseleave="rightInfoHide=-1">
                 <div>物联网</div>
                 <div v-show="rightInfoHide===9"
                      style="font-size: 10px;font-weight: normal;line-height: 1.5em"
                 >
                   通过腾讯云物联网，致力提供IoT全栈产品和解决方案。
                 </div>
               </div>
             </div>
           </div>

           <div class="right-show-line2" style="height: 255px;width: 750px">
             <div  style="position: relative">
               <div style="width: 375px; float: left; position: absolute">
                 <img width="375px" height="255px" src="https://www.tencent.com/data/index/index_link_3_3.jpg" alt="">
               </div>
               <div  class="shadow-info right-shadow" @mouseover="rightInfoHide=10" @mouseleave="rightInfoHide=-1">
                 <div>多媒体</div>
                 <div v-show="rightInfoHide===10"
                      style="font-size: 10px;font-weight: normal;line-height: 1.5em"
                 >
                   连接人与人，提供功能丰富的即时通信和社交平台，让沟通更便捷。
                 </div>
               </div>
             </div>
             <div style="position: relative; margin-left: 375px">
               <div style="width: 375px; float: left; position: absolute">
                 <img width="375px" height="255px" src="https://www.tencent.com/data/index/index_link_3_4.jpg" alt="">
               </div>
               <div  class="shadow-info right-shadow" @mouseover="rightInfoHide=11" @mouseleave="rightInfoHide=-1">
                 <div>腾讯探索</div>
                 <div v-show="rightInfoHide===11"
                      style="font-size: 10px;font-weight: normal;line-height: 1.5em"
                 >
                   通过腾讯云物联网，致力提供IoT全栈产品和解决方案。
                 </div>
               </div>
             </div>
           </div>


         </div>
       </div>
     </div>



   </div>

</template>

<script>
export default {
  name: "home",
  data(){
    return{
      activeIndex: '1',
      isHide: true,
      leftNavIndex:0,
      rightInfoHide:-1,
      currentPicIndex: 0,
      picSrcs: ["https://www.tencent.com/img/banners/brief-3.jpg","https://www.tencent.com/img/banners/brief-1-1.jpg"],
      mainSrcs: ["https://static.www.tencent.com/uploads/2021/07/20/5dcae77cee59ea2c6645b71359bf70ff.jpg!article.cover","https://static.www.tencent.com/uploads/2021/06/30/ab4ac45487f2464763da446c5c8fb1ef.png!article.cover"],
      centerNavSrcs: ["https://www.tencent.com/data/index/index_detail_1.jpg","https://www.tencent.com/data/index/index_detail_2.jpg","https://www.tencent.com/data/index/index_detail_3.jpg"],
      leftShowClassName: ["left-show","left-light-show","left-light-show"]
    }
  },

  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },

    hoverNav(){
      this.isHide=false;
      document.querySelector("a").style.color='#000'
    },
    leaveNav(){
      this.isHide=true;
      document.querySelector("a").style.color='#FFF'
    },

    changePicNext(){
      this.currentPicIndex=this.currentPicIndex === this.picSrcs.length-1 ? 0 : this.currentPicIndex+1;
    },

    changePicPre(){
      this.currentPicIndex=this.currentPicIndex === 0 ? this.picSrcs.length-1 : this.currentPicIndex-1;
    },

    handlePicChange(){
      setInterval(() =>{
        this.changePicNext();
      },5000);
    },

    leftShowHover(index){
      this.leftNavIndex=index;
      for(let i=0;i<this.leftShowClassName.length;i++){
        this.leftShowClassName[i]="left-light-show";
      }
      this.leftShowClassName[index]="left-show";
    },
    rightShowHover(){
      this.rightInfoHide=false;

    }

  },

  mounted() {
    this.handlePicChange();
    document.onmousewheel = function (ev) {
      //上下滚轮动作判断
      let e = ev || window.event;
      let nav=document.querySelector("#nav")
      let logo=document.querySelector(".logo");
      let top=document.documentElement.scrollTop;
      if (e.wheelDelta) {
        if (e.wheelDelta > 0) { //当滑轮向上滚动时
         // console.log(1)
          if(top>=200){
            nav.className="stick";
            logo.style.color='black';
          }
          else {
            nav.className="simple";
            logo.style.color='#fff';
          }

        }
        if (e.wheelDelta < 0) { //当滑轮向下滚动时
          nav.className="simple";
          logo.style.color='#fff';
        }
      }
    };
  }
}
</script>

<style scoped>
.logo {
  display: block;
  margin-top: 12px;
  margin-left: 10px;
  color: #FFF;

}

.stick{
  position: fixed;
  top: 10px;
  background-color: #FFFFFF;
  z-index: 999;
  width: 100%;
  margin: 0;
}

.logo span{
  font-size: 24px;
}

.el-menu-demo{
  border-bottom: none;
}

.bg-white{
  width: 100%;
  height: 370px;
  background-color: white;
}

.bg-img{
  height: 700px;
}
.banner-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.banner-shadow{
  position: absolute;
  display: flex;
  background: rgba(0,0,0,0.5);
  height: 700px;
  width: 100%;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap
}
.shadow-info{
  font-family: 'PingFangSC-Regular', 'helvetica neue', tahoma, 'PingFang SC', 'microsoft yahei', arial, 'hiragino sans gb', sans-serif;
  font-size: 20px;
  line-height: 1.5em;
  list-style: none;
  color: #FFF;
  padding: 0;
  max-width: 1200px;
  width: auto;
}
.banner_arr_l{
  color: #2b2e2e;
  display: inline-block;
  width: 54px;
  height: 54px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center left;
  background-image: url(https://www.tencent.com/img/index/icon_arrow_r.png);
  margin: 0px 24px 0px 0px;
  transform: scaleX(-1);
  cursor: pointer;
}
.banner_arr_r{
  color: #2b2e2e;
  display: inline-block;
  width: 54px;
  height: 54px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center left;
  background-image: url(https://www.tencent.com/img/index/icon_arrow_r.png);
  margin: 0px 24px 0px 0px;
  cursor: pointer;
}

.banner_arr{
  position: relative;
}
.trans-enter-active{
  transition: all 1s;
}

.trans-leave{
  transform: translateX(0)
}
.tagline{
  margin: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: bold;
  line-height: 24px;
  height: 30px;
  display: inline-block;
  position: relative;
  padding: 0px 30px;
  color: rgba(25,74,195,1);
  left: -24px;

}

.tagline-2{
  margin: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: bold;
  line-height: 24px;
  height: 30px;
  display: inline-block;
  position: relative;
  padding: 0px 30px;
  color: #FFFFFF;
  left: -24px;
}
.card-title{
  font-family: 'PingFangSC-Regular', 'helvetica neue', tahoma, 'PingFang SC', 'microsoft yahei', arial, 'hiragino sans gb', sans-serif;
  font-variant: normal;
  margin: 12px 0px;
  padding: 0px;
  font-size: 22px;
  line-height: 1.4em;
  font-weight: normal;
}

.header{

  box-sizing: border-box;
  font-variant: normal;
  margin: 12px 0px;
  padding: 0px;
  line-height: 1.5em;
  font-size: 28px;
  font-style: italic;
  font-weight: 500;
  color: #FFF;

}

.img-one {
  width: 100%;
  display: block;
  cursor: pointer;
  transition: all 0.6s;

}
.img-one:hover{
  transform: scale(1.4);
}

.card-info{
  padding-top: 20px;
  font-size: 15px;
  font-family: 'PingFangSC-Regular', 'helvetica neue', tahoma, 'PingFang SC', 'microsoft yahei',serif
}

.card-title-2{
  font-family: 'PingFangSC-Regular', 'helvetica neue', tahoma, 'PingFang SC', 'microsoft yahei', arial, 'hiragino sans gb', sans-serif;
  margin: 12px 0px;
  padding: 0px;
  font-size: 22px;
  line-height: 1.4em;
  color: #FFFFFF;
  font-weight: bold;
}
.card-info-2{
  padding-top: 20px;
  font-size: 15px;
  font-family: 'PingFangSC-Regular', 'helvetica neue', tahoma, 'PingFang SC', 'microsoft yahei',serif;
  color: #FFFFFF;
}
.center-nav{
  width: 200px;
  height: 150px;
}
.center-shadow{
  position: absolute;
  display: flex;
  width: 100%;
  justify-content: center;
  align-content: center;
  margin-top: 75px;


}
.left-show:hover{
  font-family: 'PingFangSC-Regular', 'helvetica neue', tahoma, 'PingFang SC', 'microsoft yahei', arial, 'hiragino sans gb', sans-serif;
  height: 170px;
  text-align: center;
  font-style: italic;
  line-height: 3em;
  width: auto;
  color: #FFFFFF;

}
.left-show{
  font-family: 'PingFangSC-Regular', 'helvetica neue', tahoma, 'PingFang SC', 'microsoft yahei', arial, 'hiragino sans gb', sans-serif;
  height: 170px;
  text-align: center;
  font-style: italic;
  line-height: 3em;
  width: auto;
  color: #8d8f92;
  cursor: pointer;
}

.left-show-title{
  font-weight: bold;
  font-size: 30px;
  list-style: none;
  padding-top: 50px;
}
.right-shadow{
  position: absolute;
  padding-top: 180px;
  font-weight: bold;
  padding-left: 30px;
  max-width: 300px;
  transition: all 0.6s;
}
.right-shadow:hover{
  position: absolute;
  padding-top: 140px;
  font-weight: bold;
  padding-left: 30px;
  cursor: pointer;
}



</style>